<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="/css/reset.css" rel="stylesheet" type="text/css">
    <link href="/css/common.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/css/elementui.css" type="text/css">
    <link href="/css/admin.css" rel="stylesheet" type="text/css">
    <style>
        .el-icon-success {
            display: none;
        }
        .el-icon-warning {
            display: none;
        }
        .el-icon-error {
            display: none;
        }
    </style>
</head>

<body>
    <div class="admin-box" id="admin">
        <div class="header">
            <div>
                <p class="banner"><span class="actived" @click="toOther(info.role ? '/admin' : '/master')">社区空间</span><span
                        @click="toOther('/index')">聊天室</span><span  @click="toOther('/search')">用户</span></p>
                <div class="name" @click="toOther('/info')"><img :src="info.picture" /><span>{{info.nick}}</span></div>
            </div>
        </div>

        <div class="admin-main">
            <div class="search-main-content">
                <div class="search"> <input placeholder="请输入搜索项" v-model="params.title" @change="getContent"/>
                    <div class="search-button" @click="getContent"> <img src="/images/search.png" /><span>搜索</span></div>
                </div>
                <div v-if="isOne && !have" style="    text-align: center;
    margin-top: 100px;
    font-size: 18px;
    color: grey;">
                    该用户有点懒，未发表任何社区信息！
                </div>
                <ul class="people">         
                    <li v-for="(item, index) in list" :key="index">
                        <div class="name" v-if="item && item.length>0">
                            <div><img :src="item[0].picture" /> <button @click="oper(item[0].status, item[0].userId)">{{item[0].status == 1 ? '启用' : '禁用'}}</button></div>
                        </div>
                        <ul class="content-box">
                            <li class="poepleName"v-if="item && item.length>0">{{item[0].publisher}}</li>
                            <li class="comment" v-for="(obj, index) in item" :key="obj.id + 1000">
                                <span style="font-size: 16px;font-weight: 600;">{{obj.title}}</span>
                                <div style="margin-top: 20px" v-html="obj.content"></div>
                                <p><span class="time">{{obj.publishTime}}</span><button @click="del(obj.id)">删除</button></p>
                            </li>
                        </ul>
                    </li>
                </ul>


            </div>
        </div>

        <!-- <div class="footer"></div> -->
    </div>
    <script src="/tools/vue.pro.js"></script>
    <script src="/tools/http.js"></script>
    <script src="/tools/elementui.js"></script>
    <script>
        new Vue({
            el: '#admin',
            data() {
                return {
                    info: {
                        nick: '',
                        picture: '',
                        role: ''
                    },
                    params: {
                        current: 1,
                        size: 100,
                        title: '',
                        userId: ''
                    },
                    list: {},
                    status:0,
                    isOne:'',
                    have:false,
                }
            },
            created() {
                let id = this.GetQueryString('id');
                this.params.userId = id ? id : '';
                this.isOne = id;
                this.getInfo();
                this.getContent();
            },
            methods: {
                GetQueryString(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]); return null;
                },
                toOther(url) {
                    if(this.status == 0){
                        window.location.href= url
                    }else{
                        if(url == '/index'){
                            alert("账户被禁用，无法进行聊天")
                        }else{
                            window.location.href= url
                        }
                    }

                },
                oper(status, staffId) {
                    let url = status == 1 ? '/unForbid' : '/forbid';
                    let that = this;
                    ajax({
                        type: 'get',
                        url,
                        data: {
                            staffId
                        },
                        success(result) {
                            // 需要进入到聊天室   /index
                            let res = JSON.parse(result)
                            console.log(res, 'res')
                            if(res.code == 200 ) {
                                that.getContent();
                            }
                        }
                    })

                },
                getContent() {
                    let that = this;
                    ajax({
                        type: 'get',
                        url: '/listPublished',
                        data: that.params,
                        success(result) {
                            // 需要进入到聊天室   /index
                            let res = JSON.parse(result)
                            // /info  /search   /master 主页
                            console.log(res, res.data.records)
                            if (res.code == 200) {
                                let obj = {};
                                if(res.data.records && res.data.records.length>0){
                                    that.have = true;
                                }
                                res.data.records.forEach(item => {
                                   if(!obj[item.userId]) {
                                       obj[item.userId] = []
                                   }
                                   obj[item.userId].push(item);
                                });
                                console.log(obj, 'thatlist')

                                that.list = obj;
                            }
                        }
                    })
                },
                //删除
                del(id) {
                    let that = this;
                    ajax({
                        type: 'get',
                        url: '/delPublish',
                        data: {
                            id
                        },
                        success(result) {
                            let res = JSON.parse(result)
                            if (res.code == 200) {
                                that.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                that.getContent();
                            }
                        }
                    })
                },
                getInfo() {
                    let that = this;
                    ajax({
                        type: 'get',
                        url: '/myInfo',
                        success(result) {
                            // 需要进入到聊天室   /index
                            let res = JSON.parse(result)
                            if (res.code == 200) {
                                that.info.role = res.data.role ? true : false;
                                that.info.nick = res.data.nick;
                                that.status = res.data.status
                                that.info.picture = res.data.picture ? res.data.picture : '/images/people.png'
                                that.show = res.data.role ? true : false;
                            }
                        }
                    })
                },
            }
        })
    </script>
</body>

</html>